<template>
  <div class="todo" ref="todo">
    <div @click="editFinish(todo.id)" class="todo-content" ref="todocontent">
      {{ todo.content }}
    </div>
    <div>
      <i class="bi bi-trash" @click="deleteItem(todo.id)"></i>
      <i class="bi bi-pencil-square" @click="editItem(todo.id)"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    deleteItem(id) {
      if (!this.todo.isFinished) {
        this.$emit('deleteTodo', id)
      } else {
        alert('任务完成后不可以删除！')
      }
    },
    editItem(id) {
      if (!this.todo.isFinished) {
        this.$emit('EditTodo', id)
      } else {
        alert('任务完成后不可以编辑！')
      }
      //不把todo.id传递给父组件
      //this.todo.isEditable=true;
    },
    editFinish(id) {
      this.$emit('EditFinish', id)
      const contentObj = this.$refs.todo
      contentObj.classList.toggle('is-finished')
    },
  },
}
</script>

<style lang="scss" scoped>
.todo {
  width: 100%;
  border: 1px solid #3636cc;
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 10px;
  margin-top: 20px;
  align-items: center;
  i {
    margin-right: 10px;
    cursor: pointer;
  }
}
.todo-content {
  cursor: pointer;
}
.is-finished {
  text-decoration: line-through 3px solid;
  opacity: 0.4;
}
</style>
